<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <link rel="stylesheet" href="../style/weui.css"/>
  <link rel="stylesheet" href="../style/weui2.css"/>
  <link rel="stylesheet" href="../style/weui3.css"/>
      <script src="../zepto.min.js"></script>
      <script>
  $(function(){

	  
	  });    
      
      </script>
</head>

<body ontouchstart class="page-bg">
<div class="page-hd">
        <h1 class="page-hd-title">
            图片效果
        </h1>
        <p class="page-hd-desc"></p>
    </div>
<div class="page-hd">
<div class="weui-label-list">
                <label class="weui-label">王宝宝</label><label class="weui-label">李太白</label>
                <label class="weui-label">赵敏值</label><label class="weui-label">都大佑</label>
            </div>
            <div class="weui-label-list">
                <label class="weui-label-s">金庸</label> <label class="weui-label-s">梁羽生</label>
                <label class="weui-label-s">古龙</label> <label class="weui-label-s">卧龙生</label>
            </div>  


<h4>.weui-img-box图片盒子<h4>
<div class="weui-img-box" >
 <div class="weui-img" style="background-image:url();"></div>
   <div class="weui-img-masker"> 
   <div class="weui-img-title" > 我们都是好孩子,最最可爱的孩子<br> <span class="weui-img-time">2016-10-18</span> 
   </div>
    </div> 
    </div>
    
    
    
<h4>.img-border边框 .img-max自动缩放<h4>
<img src="" class="img-border img-max">

<h4>.img-border .img-max .img-radius圆角<h4>
<img src="" class="img-border img-max img-radius">

<h4>.img-radius.img-max自动缩放<h4>
<img src="" class="img-radius img-max">

<h4>.circle<h4>
<img src="" class="circle" style="width:100px;height:100px;">



<h4>.circle .xz360<h4>
<img src="" class="circle xz360" style="width:100px;height:100px;">
<h4>.blur<h4>
<img src="" class="blur" style="width:100px;height:100px;">

<h4>.radius-lg<h4>
<img src="" class="radius-lg" style="width:100px;height:100px;">
<h4>.radius-md<h4>
<img src="" class="radius-md" style="width:100px;height:100px;">


<h4>.radius-sm<h4>
<img src="" class="radius-sm" style="width:100px;height:100px;">
<h4>.radius<h4>
<img src="" class="radius" style="width:100px;height:100px;">

<h4>.jb渐变<h4>
<div class="jb" style="width:100px;height:100px;"></div>
<h4>.bs边框阴影<h4>
<div class="bs" style="width:100px;height:100px;"></div>
<div style="height:100px;" class="ts f40">字体阴影</div>

<h4>.opacity<h4>
<img src="" class="opacity" style="width:100px;height:100px;">
<h4>.opacity-0<h4>
<img src="" class="opacity-0" style="width:100px;height:100px;">
<h4>.opacity-1<h4>
<img src="" class="opacity-1" style="width:100px;height:100px;">

<h4>.weui-avatar<h4>
<img src="" class="weui-avatar">
<h4>认证头像<h4>
<div class="weui-avatar-circle">
<img src="" class="weui-avatar-url">
<img class="weui-avatar-status" src="">
</div>
<h4>认证头像<h4>
<div class="weui-avatar">
<img src="">
<img class="weui-avatar-status" src="">
</div>

</div></body>
</html>
